<!-- html -->
<template>
    <h1 class="h1">组合式API</h1>
    <span class="span2">num1：</span>
    <input class="input1" type="number" v-model="num1">
    <span class="span2">num2：</span>
    <input class="input1" type="number" v-model="num2">
    <button class="button1" @click="changeNum1">修改num1</button>
    <button class="button1" @click="showSum">查看和</button>
</template>

<!-- js或ts -->
<script lang="ts">
export default {
    //组件名
    name: 'combinationHome',
    setup() {
        //数据
        let num1 = 1
        let num2 = 1
        //方法
        function changeNum1() {
            num1 += 1
            console.log('num1：', num1)
        }
        function showSum() {
            alert(num1 + num2)
        }
        return { num1, num2, changeNum1, showSum }
    }
}
</script>

<!-- 样式 -->
<style scoped></style>